<template>
  <div class="SM">
    <!--顶部标题-->
    <div class="content-top">
      <span>排班管理</span>
    </div>
    <!--左边二级侧边栏-->
    <div class="content-left"></div>
    <!--右边内容-->
    <div class="content-right">
      <div class="content-content">
        <div class="default-tabs">
          <el-tabs
            v-model="activeName"
            type="card"
            mode="horizontal"
            @tab-click="loadData"
          >
            <el-tab-pane label="排班计划" name="1" />
          </el-tabs>
          <div class="view-content">
            <!--排班计划 SPlan-->
            <div v-if="activeName == 1" class="service">
              <div class="content-content-right">
                <div class="content-head">
                  <div class="input-item fl flex flex-y-center">
                    <span class="span-title fl">选择部门：</span>
                    <span class="span-input fl">
                      <el-select
                        v-model="SPlan.tableConfig.params.deptId"
                        clearable
                        placeholder="请选择部门"
                      >
                        <el-option
                          v-for="item in deptIdOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </span>
                  </div>
                  <div class="input-item fl flex flex-y-center">
                    <span class="span-title fl">选择日期：</span>
                    <span class="span-input fl">
                      <el-date-picker
                        v-model="SPlan.tableConfig.paramsTmp.date"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                      >
                      </el-date-picker>
                    </span>
                  </div>

                  <div class="input-item fl">
                    <span class="span-input fl">
                      <el-button type="primary" @click="SPlanSearch"
                        >查询</el-button
                      >
                    </span>
                  </div>
                </div>
                <div class="content-table">
                  <Table
                    ref="Table"
                    :atone="true"
                    :columns="SPlan.tableConfig.columns"
                    :url="SPlan.tableConfig.url"
                    :pparams="SPlan.tableConfig.pparams"
                    @tableBubbling="SPlanTableBubbling"
                  ></Table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--各种弹窗-->
    <Vmask :mask="mask" @FnMask="FnMask" />
  </div>
</template>
<script>
import Vmask from '@/components/vmask.vue'
import Table from '@/components/table.vue'
import {Class} from '@/const/api'
import mixins from '@/const/mixins'

export default {
  name: 'SM',
  components: {
    Vmask,
    Table,
  },
  mixins: [mixins],
  data() {
    return {
      activeName: '1',
      SPlan: {
        isLoad: false, // 是否加载过该容器的数据
        params: {},
        data5: [],
        tableConfig: {
          url: '/class/selectget',
          columns: [
            {
              dataIndex: 'startDay',
              title: '排班周期开始日期',
            },
            {
              dataIndex: 'endDay',
              title: '排班周期结束日期',
            },
            {
              dataIndex: 'duration',
              title: '排班天数',
            },
            {
              dataIndex: 'workerStartTimeAndEnd',
              title: '排班时间',
            },
            {
              dataIndex: 'deptName',
              title: '部门/组别',
            },
            {
              align: 'center',
              dataIndex: ['delete', 'shifts'],
              title: '操作',
            },
          ],
          params: {
            deptId: null,
            pageNum: 1,
            pageSize: 15,
          },
          pparams: {},
          paramsTmp: {
            date: null,
          },
        },
        tableLoading: false,
        tableData: [
          {
            n1: 1,
            n2: 2,
            n3: 3,
            n4: 4,
            n5: false,
          },
        ],
      },
      mask: {
        title: '',
        showMask: false,
        form: [
          {
            title: '工号',
            width: '',
            type: 'text',
            name: 'name',
            value: '',
            default: '',
            placeholder: '请填写工号',
            disabled: false,
            required: false,
          },
        ],
        width: '28%',
        btnLoading: false,
      },
      container: false,
      containerArr: ['SPlan'],
      deptIdOptions: [],
    }
  },
  created() {
    window._this = this

    this.getDepartmentList(0) // 获取部门
  },
  methods: {
    loadData() {
      // 根据activeName加载对应tab数据
      let activeName = this.activeName
      this.container = this[this.containerArr[activeName * 1 - 1]] // 拿 tab con 进行操作

      let params = JSON.parse(
        JSON.stringify(this.container.tableConfig.pparams),
      )
      let paramsTmp = this.container.tableConfig.paramsTmp
      this.container.tableConfig.pparams.startDay = paramsTmp.date
        ? this.$utils.parseTime(paramsTmp.date[0], '{y}-{m}-{d}')
        : null
      this.container.tableConfig.pparams.endDay = paramsTmp.date
        ? this.$utils.parseTime(paramsTmp.date[1], '{y}-{m}-{d}')
        : null

      if (activeName == 1 && !this.container.isLoad) {
        // 排班计划
        setTimeout(() => {
          this.$refs['Table'].fetchList(true)
        }, 100)
      }
      this.container.isLoad = true
    },
    async SPlanSearch() {
      this.SPlan.isLoad = false
      this.SPlan.tableConfig.params.pageNum = 1
      this.SPlan.tableConfig.pparams = JSON.parse(
        JSON.stringify(this.SPlan.tableConfig.params),
      )
      this.loadData()
    },
    FnMask(e) {
      console.log(e, 'e')
      let type = e.type
      let content = e.content ? JSON.parse(JSON.stringify(e.content)) : false
      let mask = this.mask
      if (type == 'cancel') {
        mask.showMask = false
      }
    },
    SPlanTableBubbling(e) {
      console.log(e, 'tableBubbling')
      let type = e.type
      let content = e.content ? JSON.parse(JSON.stringify(e.content)) : false
      let mask = this.mask
      if (type == 'delete') {
        const h = this.$createElement
        this.$msgbox({
          title: '删除提示',
          message: h('p', null, [
            h('span', null, '你确定删除该记录吗？'),
            h('i', {style: 'color: teal; fontStyle: normal'}, content.id),
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true
              instance.confirmButtonText = '删除中...'
              this.$axios
                .$get(Class('delete'), {params: {id: content.id}})
                .then(res => {
                  if (res.state == this.ResCode) {
                    this.$Message.success('删除成功')
                    setTimeout(() => {
                      this.$refs['Table'].fetchList()
                    }, 100)
                  } else {
                    this.$Message.error(res.msg)
                  }
                  done()
                  instance.confirmButtonLoading = false
                  instance.confirmButtonText = '确定'
                })
            } else {
              done()
            }
          },
        }).then(action => {})
      } else if (type == 'shifts') {
        this.$router.push('/shifts/shifts')
      } else if (type == 'team') {
        this.$router.push('/team/team')
      }
    },
    SPlanSearchAdd() {
      this.mask.showMask = true
      this.mask.title = '添加员工'
    },
  },
}
</script>

<style lang="less">
.SM {
  .content-content-right {
    min-height: calc(100vh - 60px - 50.8px - 60px);
  }

  .content-content-top {
    padding-top: 14px;
    font-weight: bold;
  }
}
</style>
